import React from 'react';
import css from './index.less';
import { observer } from 'mobx-react';
import Group from 'components/config/group';
import Range from 'components/config/range';
import Input from 'components/config/input';
import Color from 'components/config/color';
import Image from 'components/config/image';
import BGImageFillMode from 'components/config/backgroundImageFillMode';
import BaseConfig from 'modules/common/config';
import Icon from 'components/icon';
import Bull from 'components/config/zoho/bull';
import Check from 'components/config/zoho/check';
import * as CONST from 'common/const';
import ScrollArea from 'components/scrollArea';

@observer
export default class PageConfig extends BaseConfig {
  title = '页面设置';

  renderAttrConfig() {
    const { mod } = this.props;
    const { height, width } = mod;
    const groupProps = {
      defaultActiveKey: [0, 1, 2, 3],
      list: [
        {
          title: '页面尺寸',
          children: (
            <div>
              <Input value={width}
                     label="页面宽度"
                     disabled={true} />
              <Input value={height}
                     label="页面高度"
                     type="number"
                     onChange={val => {
                       mod.setHeight(val);
                     }} />
            </div>
          )
        },
        {
          title: '背景填充',
          children: (
            <div>
              <Check
                label="填充应用于全部界面"
                myKey={mod.fillAll}
                click={() => {
                  mod.isFillAll();
                }}
              />
              <hr className={css.hr}/>
              <Color label="颜色填充"
                     color={mod.backgroundColor}
                     onChange={color => {
                       mod.update('backgroundColor', color);
                     }} />
              <hr className={css.hr}/>
              <Bull title="图案填充"/>
              <Image
                src={mod.backgroundImage}
                onChange={src => {
                  mod.update('backgroundImage', src);
                }} />
              <hr className={css.hr}/>
              <BGImageFillMode
                value={mod.backgroundImageFillMode}
                onChange={val => {
                  mod.update('backgroundImageFillMode', val);
                }} />
            </div>

          )
        },
        {
          title: '样式设置',
          children: (
            <div>
              <Range label="模糊"
                     onChange={val => {
                       mod.update('blur', val);
                     }}
                     value={mod.blur} />
              <Range label="透明"
                     onChange={val => {
                       mod.update('opacity', val);
                     }}
                     value={mod.opacity} />
              <Range label="旋转"
                     onChange={val => {
                       mod.update('rotate', val);
                     }}
                     min={0}
                     max={360}
                     value={mod.rotate} />
              <Bull key="2" title="翻转">
                <div className={css.iconRotate}>
                  <Icon type="icon-upside-down" onClick={ () => {
                    mod.changeRotateX();
                  }}/>
                  <Icon type="icon-flip" onClick={() => {
                    mod.changeRotateY();
                  }} />
                </div>
              </Bull>
            </div>
          )
        },
        {
          title: '滤镜设置',
          children: (
            <div>
              <Range label="亮度" min={0} max={200} step={1} value={mod.brightness} onChange={val => {
                mod.update('brightness', val);
              }}/>
              <Range label="对比" min={0} max={200} step={1} value={mod.contrast} onChange={val => {
                mod.update('contrast', val);
              }}/>
              <Range label="饱和" min={0} max={100} step={1} value={mod.saturate} onChange={val => {
                mod.update('saturate', val);
              }}/>
              <Range label="灰度" min={0} max={100} step={1} value={mod.grayscale} onChange={val => {
                mod.update('grayscale', val);
              }}/>
              <Range label="加温" min={0} max={100} step={1} value={mod.sepia} onChange={val => {
                mod.update('sepia', val);
              }}/>
              <Range label="色相" min={0} max={360} step={1} value={mod.hueRotate} onChange={val => {
                mod.update('hueRotate', val);
              }}/>
              <Range label="反色" min={0} max={100} step={1} value={mod.invert} onChange={val => {
                mod.update('invert', val);
              }}/>
            </div>
          )
        },
        {
          title: '翻页箭头',
          children: (
            <div>
              <Check
                label="将翻页箭头应用于全部界面"
                myKey={mod.rowAll}
                click={() => {
                  mod.isRowAll();
                }}
              />
              <hr className={css.hr}/>
            </div>
          )
        },
      ]
    };
    return (
      <ScrollArea
        style={{
          maxHeight: window.innerHeight - CONST.SIMULATOR_MARGIN_TOP - CONST.HEADER_HEIGHT - 50 - 44 - 50,
        }}
      >
        <Group {...groupProps}/>
      </ScrollArea>
    );
  }
}
